<template>
  <!-- 主体区域 -->
  <section id="app">
    <TodoHeader  :taskList="taskList" @add="addFn"></TodoHeader>
    <TodoMain :taskList="taskList" @del="delFn"></TodoMain>
    <TodoFooter :taskList="taskList" @clear="clearFn"></TodoFooter>

  </section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter

},
 
  data () {
    return {
      taskList:[
        {id:1,name:'吃饭'},
        {id:2,name:'睡觉'},
        {id:3,name:'打豆豆'},
      ]
    }
  },
  methods:{
    addFn(newValue){
this.taskList.push(newValue)
    },
    delFn(id){
      this.taskList=this.taskList.filter(ele=>ele.id!=id)
    },
    clearFn(){
      this.taskList=[]
    }
  }
}
</script>

<style>

</style>
